<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="admin/_fragments::head(~{::title})">
    <title>后台</title>
</head>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="../../static/js/semantic.min.js" th:src="@{/js/semantic.min.js}"></script>

<body>
    <!--导航 -->
    <nav  th:replace="admin/_fragments::menu(1)" class="ui inverted attached segment mine-padded-tb-mini">
    </nav>
    <div class="ui attached pointing menu">
        <div class="ui container">
            <div class="right menu">
                <a href="#" class="item">发布</a>
                <a href="#" class="teal active item">列表</a>
            </div>
        </div>
    </div>
    <!-- 中间内容 -->
    <div class="mine-container mine-padded-tb-large">
        <div class="ui container">
            <div class="ui segment form">
                <input type="hidden" name="number">
                <div class="inline fields">
                    <div class="field">
                        <input type="text" name="title" placeholder="标题">
                    </div>
                    <div class="field">
                        <div id="typeSelect" class="ui selection dropdown">
                            <input type="hidden" name="blogType">
                            <i class="dropdown icon"></i>
                            <div class="default text" >分类</div>
                            <div  class="menu">
                                <!--<div th:each="type : ${types}" th:data-value="${type.name}" th:text="${type.name}" class="item" data-value="1"></div>-->
                                <div th:text="原创" class="item" data-value="0"></div>
                                <div th:text="翻译" class="item" data-value="1"></div>
                                <div th:text="转载" class="item" data-value="2"></div>
                            </div>
                        </div>
                    </div>
                    <div class="field">
                        <div class="ui checkbox">
                            <input type="checkbox" id="recommend" name="recommend">
                            <label for="recommend">推荐</label>
                        </div>
                    </div>
                    <div class="field">
                        <button id="query-btn" class="ui mini teal basic button"><i class="search icon"></i>搜索 </button>
                    </div>
                </div>
            </div>
            <div id="blogListId">
                <table th:fragment="blogList" class="ui celled table">
                    <thead>
                    <tr>
                        <th>编号</th>
                        <th>标题</th>
                        <th>类型</th>
                        <th>推荐</th>
                        <th>展示</th>
                        <th>更新时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="blog : ${page.content}">
                        <td th:text="${blog.id}">1</td>
                        <td th:text="${blog.title}">可以练习清单</td>
                        <td th:text="${blog.blogType}=='0' ? '原创' : (${blog.blogType}=='1' ? '翻译' : '转载')">认知升级</td>
                        <td th:text="${blog.recommend}=='0'?'否':'是'">认知升级</td>
                        <td th:text="${blog.published}=='0'?'否':'是'">认知升级</td>
                        <td th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd HH:mm:ss')}"></td>
                        <td>
                            <a href="#" th:href="@{/admin/blogs/input/{id}(id=${blog.id})}" class="ui mini basic teal button">编辑</a>
                            <a href="#" th:href="@{/admin/blogs/delete/{id}(id=${blog.id})}" class="ui mini basic red button">删除</a>
                        </td>
                    </tr>
                    </tbody>
                    <tfoot>
                    <tr>
                        <th colspan="7">
                            <div class="ui pagination menu mini" th:if="${page.pageTotal}>1">
                                <a onclick="page(this)" th:attr="data-page=${page.number}-1" class="item"  th:classappend="!${page.pre} ? mine-href-hide">上一页</a>
                                <a onclick="page(this)" th:attr="data-page=${page.number}+1" class="item" th:classappend="!${page.next} ? mine-href-hide">下一页</a>
                            </div>
                            <a href="#" th:href="@{/admin/blogs/input/null}" class="ui mini right floated teal basic button">新增</a>
                        </th>
                    </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <footer th:replace="admin/_fragments::footer" class="ui inverted vertical segment mine-padded-tb-massive">
    </footer>
    <script>
        $('.ui.dropdown').dropdown({
            on : 'hover'
        });
        function page(ob) {
            $("[name='number']").val($(ob).data("page"));
            loadData();
        };
        function loadData() {
            $("#blogListId").load(/*[[@{/admin/blogs/query}]]*/"/admin/blogs/query",{
                title: $("[name='title']").val(),
                blogType: $("[name='blogType']").val(),
                recommend: $("[name='recommend']").prop('checked'),
                number: $("[name='number']").val(),
            });
        };
        $("#query-btn").click(function () {
            $("[name='number']").val('0');
           loadData();
        });
    </script>
</body>
</html>